<template>
  <div class="column">
    <div class="title">{{ $t('settings.notificationSettings.title') }}</div>
    <div class="notifications column q-gutter-y-md q-my-md">
      <div class="row items">
        <q-toggle v-model="desktop" color="accent" />
        <div>
          <div class="title">
            {{ $t('settings.notificationSettings.desktopNotification') }}
          </div>
          <div class="description">
            {{
              $t('settings.notificationSettings.desktopNotificationSubtitle')
            }}
          </div>
        </div>
      </div>
      <div class="row items">
        <q-toggle v-model="newVideos" color="accent" />
        <div>
          <div class="title">
            {{ $t('settings.notificationSettings.newVideoTitle') }}
          </div>
          <div class="description">
            {{ $t('settings.notificationSettings.newVideoSubtitle') }}
          </div>
        </div>
      </div>
      <div class="row items">
        <q-toggle v-model="newAudios" color="accent" />
        <div>
          <div class="title">
            {{ $t('settings.notificationSettings.newAudioTitle') }}
          </div>
          <div class="description">
            {{ $t('settings.notificationSettings.newAudioSubtitle') }}
          </div>
        </div>
      </div>
      <div class="row items">
        <q-toggle v-model="newFollowers" color="accent" />
        <div>
          <div class="title">
            {{ $t('settings.notificationSettings.newFollowersTitle') }}
          </div>
          <div class="description">
            {{ $t('settings.notificationSettings.newFollowersSubtitle') }}
          </div>
        </div>
      </div>
      <div class="row items">
        <q-toggle v-model="compliments" color="accent" />
        <div>
          <div class="title">
            {{ $t('settings.notificationSettings.compliments') }}
          </div>
          <div class="description">
            {{ $t('settings.notificationSettings.complimentsSubtitle') }}
          </div>
        </div>
      </div>
      <div class="row items">
        <q-toggle v-model="reactions" color="accent" />
        <div>
          <div class="title">
            {{ $t('settings.notificationSettings.reactions') }}
          </div>
          <div class="description">
            {{ $t('settings.notificationSettings.reactionsSubtitle') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useUserStore } from 'stores/user-store';
import { computed, onMounted } from 'vue';
const userStore = useUserStore();
onMounted(async () => {
  await userStore.getUserNotificationSettings();
});
const desktop = computed<boolean>({
  get() {
    return userStore.isDesktopNotificationEnabled;
  },
  set(value: boolean) {
    void userStore.updateUserNotificationSettings({
      desktop: value,
    });
  },
});
const newVideos = computed<boolean>({
  get() {
    return userStore.isNewVideoNotificationEnabled;
  },
  async set(value: boolean) {
    await userStore.updateUserNotificationSettings({
      newVideos: value,
    });
  },
});
const newAudios = computed<boolean>({
  get() {
    return userStore.isNewAudioNotificationEnabled;
  },
  set(value: boolean) {
    void userStore.updateUserNotificationSettings({
      newAudios: value,
    });
  },
});
const newFollowers = computed<boolean>({
  get() {
    return userStore.isNewFollowersNotificationEnabled;
  },
  set(value: boolean) {
    void userStore.updateUserNotificationSettings({
      newFollowers: value,
    });
  },
});
const compliments = computed<boolean>({
  get() {
    return userStore.isComplimentNotificationEnabled;
  },
  set(value: boolean) {
    void userStore.updateUserNotificationSettings({
      compliments: value,
    });
  },
});
const reactions = computed<boolean>({
  get() {
    return userStore.isReactionNotificationEnabled;
  },
  set(value: boolean) {
    void userStore.updateUserNotificationSettings({
      reactions: value,
    });
  },
});
</script>
<style lang="sass" scoped>

.notifications
  .items
    .title
      font-size: 14px
    .description
      font-size: 14px
      color: $sub
</style>
